<template>
    <div>
        <van-field
                readonly
                v-model="selected"
                :name="name"
                :required="required"
                :label="label"
                :placeholder="placeholder"
                :border="border"
                :rules="selectRule"
                @click="openSelection">
        </van-field>

        <div :id="containerId" style="width: 100%" class="cust-select-ty"></div>
        <van-popup v-model="show" bind:close="onClose" :get-container="getContainer">
            <app-report-list
                    ref="selectRef"
                    :code="code"
                    :show-fields="ogn"
                    @back="()=>show=false"
                    @ok="getSelectedList">
            </app-report-list>
        </van-popup>
    </div>
</template>

<script>
  import AppReportList from './AppReportList'
  export default {
    name: "AppPopup",
    components:{
      AppReportList
    },
    props:{
      display:{
        type:String,
        default:'inline-block',
        required:false
      },
      name:{
        type:String,
        default:'',
        required:false
      },
      required:{
        type:Boolean,
        default:false,
        required:false
      },
      label:{
        type:String,
        default:'',
        required:false
      },
      placeholder:{
        type:String,
        default:'请选择',
        required:false
      },
      border:{
        type:Boolean,
        default:false,
        required:false
      },
      code:{
        type: String,
        default: '',
        required: false
      },
      dest:{
        type: String,
        default: '',
        required: false
      },
      ogn:{
        type: String,
        default: '',
        required: false
      },
      value:{
        type:String,
        required:false
      },

    },
    data(){
      return {
        selected:'',
        containerId:'',
        show:false
      }
    },
    watch:{
      value(val){
        if(!val || val==0){
          this.selected = ''
        }else{
          this.selected = val
        }
      }
    },
    created(){
      this.initContainerId();
    },
    computed:{
      selectRule(){
        if(this.required===true){
          return [{ required: true, message: `请选择${this.label}`}]
        }else{
          return [];
        }
      }
    },
    methods:{
      openSelection(){
        this.show = true
        this.$nextTick(()=>{
          this.$refs.selectRef.clearAll()
        })
      },
      onClose(){
        this.show = false;
      },
      initContainerId(){
        this.containerId = 'msty'+new Date().getTime();
      },
      getContainer(){
        return document.getElementById(this.containerId)
      },
      getSelectedList(selectList){
        console.log("selectList",selectList);
        let destArr = this.dest.split(',');
        let ognArr = this.ogn.split(',');
        let backObj = {};
        for(let a = 0;a < destArr.length;a++){
          let temp = [];
          for(let item of selectList){
            temp.push(item[ognArr[a]]);
          }
          backObj[destArr[a]] = temp.join(',');
          if(a===0){
            this.selected = temp.join(',')
          }
        }
        //console.log('回显对象',backObj)
        this.$emit('change',backObj)
        this.show = false
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }

  }
</script>

<style>
    .cust-select-ty .van-popup{width:100%;height: 100%;}
</style>